<template>
	<view class="qiun-columns">
		<view class="qiun-charts"><canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas></view>
	</view>
</template>

<script>
import uCharts from './u-charts.js';
import { pixelRatio } from '@/libs/common';
var _self;
var canvaLineA = null;
export default {
	data() {
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1
		};
	},

	mounted() {
		_self = this;
		this.cWidth = uni.upx2px(650);
		this.cHeight = uni.upx2px(500);
		this.getServerData();
	},
	// onShow() {
	// 	_self = this;
	// 	this.cWidth = uni.upx2px(650);
	// 	this.cHeight = uni.upx2px(500);
	// 	this.getServerData();
	// },
	methods: {
		getServerData() {
			console.log(this.scoreVos);
			uni.request({
				url: 'https://www.ucharts.cn/data.json',
				data: {},
				success: function(res) {
					console.log(res.data.data);
					// let LineA={categories:[],series:[]};
					// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					// LineA.categories=res.data.data.LineA.categories;
					// LineA.series=res.data.data.LineA.series;
					// _self.showLineA("canvasLineA",LineA);
				},
				fail: e => {
					console.log(e);

					// _self.tips="网络错误，小程序端请检查合法域名";
				}
			});

			let LineA = { categories: [], series: [{}, {}, {}, {}] };
			LineA.categories = this.scoreVos.map(item => {
				return item.termName;
			});

			LineA.series = LineA.series.map(item => {
				return {
					name: '',
					data: []
				};
			});
			this.scoreVos.map((item, i) => {
				LineA.series[0].name = '最高分';
				LineA.series[1].name = '最低分';
				LineA.series[2].name = '平均分';
				LineA.series[3].name = '个人分';
				LineA.series[0].data.push(item.highestSocre);
				LineA.series[1].data.push(item.lowestScore);
				LineA.series[2].data.push(item.avgScore);
				LineA.series[3].data.push(item.personalScore);
			});

			_self.showLineA('canvasLineA', LineA);
		},
		showLineA(canvasId, chartData) {
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				fontSize: 11,
				legend: { show: true },
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disableGrid: true,
					axisLineColor: '#D0D0D0'
					//   type: "grid",
					//   gridColor: "#",
					//   gridType: "dash",
					//   dashLength: 8
				},
				yAxis: {
					disableGrid: true,
					axisLineColor: '#D0D0D0',

					gridType: 'dash',
					gridColor: '#D0D0D0',
					//   dashLength: 8,
					//   splitNumber: 5,
					min: 0,
					max: 100,
					format: val => {
						return val.toFixed(0) + '分';
					}
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					line: {
						type: 'straight'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		}
	},
	props: {
		scoreVos: {
			type: Array,
			required: true
		}
	},
	watch: {
		scoreVos: {
			handler(n) {
				this.getServerData();
			}
		}
	}
};
</script>

<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
	width: 100%;
	height: 500upx;
	padding: 50upx;
	background-color: #ffffff;
}

.charts {
	width: 650upx;
	height: 500upx;
	background-color: #ffffff;
}
</style>
